<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          padding: 0;
          margin: 0;
        }
    
        section {
          width: 200px;
          height: 200px;
          margin: 300px auto;
    
          /* 正方体此时需要旋转, 正方体此时是演员的身份, 给正方体整体box添加的舞台 */
          perspective: 10000px;
        }
    
        .box {
          width: 200px;
          height: 200px;
          /* 子绝父相 */
          position: relative;
          /* 3D旋转,舞台设置perspective */
          perspective: 10000px;
    
          /* box盒子既是舞台又是演员, 就需要设置transform-style: preserve-3d; */
          /* 设置变形类型, 保留它的内部3D效果 */
          transform-style: preserve-3d;
          /* 正方体整体过渡 */
          transition: all 10s linear 0s;
        }
    
        .box p {
          width: 200px;
          height: 200px;
          position: absolute;
          top: 0;
          left: 0;
        }
    
        /* 先3D旋转,3D的舞台要设置perspective,演员要设置transform 在空间移动 */
        .box p:nth-child(1) {
          background: rgba(173, 130, 162, 0.48);
          /* 前面,往前空间平移100px 其他面就会简单一些*/
          transform: translateZ(100px);
        }
    
        .box p:nth-child(2) {
          background: rgba(89, 182, 151, 0.48);
          /* 顶面, 先3D旋转(后仰90度), 再空间前进100px */
          transform: rotateX(90deg) translateZ(100px);
        }
    
        .box p:nth-child(3) {
          background: rgba(176, 152, 199, 0.48);
          /*底面 */
          transform: rotateX(-90deg) translateZ(100px);
        }
    
        .box p:nth-child(4) {
          background: rgba(199, 128, 110, 0.48);
          /* 右面 */
          transform: rotateY(90deg) translateZ(100px);
        }
    
        .box p:nth-child(5) {
          background: rgba(197, 230, 160, 0.48);
          /* 左面 */
          transform: rotateY(-90deg) translateZ(100px);
        }
    
        .box p:nth-child(6) {
          background: rgba(51, 94, 94, 0.48);
          /* 背面 */
          transform: rotateX(180deg) translateZ(100px);
        }
    
        /* 给舞台添加hover */
        section:hover .box {
          transform: rotateX(360deg) rotateY(360deg);
        }
      </style>
    </head>
    
    <body>
      <!-- 先是一个舞台, 然后是6个面 -->
      <section>
        <div class="box">
          <p></p >
          <p></p >
          <p></p >
          <p></p >
          <p></p >
          <p></p >
        </div>
      </section>
    
</body>
</html>